<template>
   <div v-loading='loading' style="padding-bottom:10px" :id="id" :class="className" :style="{height:height,width:width}">
   </div>       
</template>
<script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');

    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/legend');
    import { getLastThirtyDaysInfo } from 'api/serviceManage';
    export default {
        name: 'trendChart',
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            }
        },
        data() {
            return {
                loading: false,
                trendData: '',
                dateList: [],
                dataList: [],
                dataNum: []
            };
        },
        mounted() {
            this.getLastThirtyDaysInfoFu();
        },
        methods: {
            getLastThirtyDaysInfoFu() {
                this.loading = true;
                getLastThirtyDaysInfo().then(res => {
                    this.loading = false;
                    this.trendData = res.data.content;
                    if (res.data.content.length > 0) {
                        this.trendData.forEach(function(element) {
                            this.dateList.push(element.date);
                            this.dataList.push(element.totalMoney);
                            this.dataNum.push(element.totalNum);
                            this.initChart();
                        }, this);
                        
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            initChart() {
                this.chart = echarts.init(document.getElementById(this.id));
                this.chart.setOption({
                    backgroundColor: '#fff',
                    title: {
                        text: '销售额增长趋势图',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: '#333',
                            padding: '0px 0px 10px 0px'
                        },
                        left: '50%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        show: true,
                        axisPointer: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            }
                        }
                    },
                    legend: {
                        icon: 'rect',
                        itemWidth: 14,
                        itemHeight: 5,
                        itemGap: 13,
                        data: ['销售额'],
                        right: '4%',
                        selectedMode: false,
                        textStyle: {
                            fontSize: 12,
                            color: '#333'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '12%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            rotate: 45,   
                            interval: 0
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#555'
                            }
                        },
                        data: this.dateList  
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '销售额/元',
                        left: '5px',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#444'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eee'
                            }
                        }
                    }],
                    series: [{
                        name: '销售额',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(174,175,180, 0.9)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(174,175,180, 0.9)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgb(255,94,44)',
                                borderColor: 'rgba(137,189,2,0.27)',
                                borderWidth: 12,
                                lineStyle: {
                                    color: 'rgba(174,175,180, 0.9)'
                                }
                            }
                        },
                        data: this.dataList
                    }]
                })
            }
        }
    }
</script>
